// 簿记交收页面
import React from 'react';
import { ContentPackage, TabC } from '@/comps/index';
import BehaviorQueryC from './query';
import TransactionQueryC from '../BookkeepingMnt/query';
import Behavior from './behavior';
import Transaction from './transaction';

class BookkeepingMnt extends React.Component {
  state = {
    activeKey: '0', // teb默认选中
  };

  // 初始化函数
  componentDidMount() {}

  // teb切换响应
  tebOnchange = (val) => {
    this.setState({
      activeKey: val,
    });
  };

  render() {
    const { activeKey } = this.state;
    return (
      <ContentPackage
        title='交收管理'
        contentHtml={
          <div>
            <div style={{ display: activeKey == 0 ? 'block' : 'none' }}>
              <TransactionQueryC onQuery={(e) => this.Transaction.onQuery(e)} onClear={(e) => this.Transaction.onClear(e)} bookkeepingType={'2'} />
            </div>
            <div style={{ display: activeKey == 1 ? 'block' : 'none' }}>
              <BehaviorQueryC onQuery={(e) => this.Behavior.onQuery(e)} onClear={(e) => this.Behavior.onClear(e)} />
            </div>
            <div style={{ marginTop: '10px' }}>
              <TabC
                tabSource={[
                  { title: '交易交收', key: '0', content: <Transaction onRef={(ref) => (this.Transaction = ref)} /> },
                  { title: '行为交收', key: '1', content: <Behavior onRef={(ref) => (this.Behavior = ref)} /> },
                ]}
                activeKey={activeKey}
                onChange={this.tebOnchange}
              />
            </div>
          </div>
        }
      />
    );
  }
}

export default BookkeepingMnt;
